<template>
	<view class="">
		<u-overlay :show="_isShow" @click="_isShow = false">
			<view class="modal-wrap fboxCol Ycenter Xcenter">
			<view class="card-box" id="card-box" @tap.stop>
				<view class="card-hd fboxRow Ycenter">
					<image class="logo" src="https://ebc-prod.cdn.benwunet.com/uni-static/logo.jpg" mode="aspectFill"></image>
					<view class="flex1">本无名片</view>
					<!-- <view class="close" v-if="isClose" @click="_isShow = false"><u-icon name="close" color="#BABABF" size="24rpx"></u-icon></view> -->
				</view>
				<view class="card-bd fboxWrap Xcenter">
					<!-- 传统名片 -->
					<view class="head-tradition" :style="{'background-image': 'url('+innerData.bg+')'}">
						<view class="inner">
							<CardTradition :innerData="innerData" :detail="detail" :pattern="pattern" :isCode="false" :isAudio="false" />
						</view>
						<image class="lang" :src="innerData.bgRipple" mode="widthFix"></image>
					</view>
				</view>
				<view class="card-ft fboxRow Xcenter">
					<view class="code">
						<canvas canvas-id="qrcode" style="width: 76px;height: 76px;"></canvas>
						<!-- <image class="companyLogo" :src="detail.companyLogo"></image> -->
					</view>
					<view class="txt fboxCol font14">
						<text class="k">（</text>
						长 按 识 别 二 维 码
						<text class="k">）</text>
					</view>
				</view>
			</view>
			<view class="fboxRow Ycenter Xcenter bottom-action">
				<view class="flex1 fboxCol Ycenter Xcenter">
					<view class="down-icon fboxRow Ycenter Xcenter" @click="downCode()"><u-icon name="download" size="36rpx" color="#fff"></u-icon></view>
					<view class="down-text">下载</view>
				</view>
				<view class="flex1 fboxCol Ycenter Xcenter">
					<view class="down-icon fboxRow Ycenter Xcenter" @click="close()">
						<u-icon name="close" size="34rpx" color="#fff"></u-icon>
						</view>
					<view class="down-text">关闭</view>
				</view>
			</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
import UQrcode from '@/static/js/uqrcode.js'
import html2canvas from '@/static/js/html2canvas.min.js'
import { Base64toUrl } from '@/api/index.js';
import CardTradition from './card-tradition.vue'
export default {
	components: {CardTradition},
	props: {
		detail: {
			type: Object,
			defaul: () => {
				return {};
			}
		},
		isShow: {
			type: Boolean,
			default: false
		},
		pattern: {
			type: [String, Number],
			default: '0'
		},
		innerData: {
			type: Object,
			defaul: () => {
				return {};
			}
		},
		pramas: {
			type: Object,
			defaul: () => {
				return {};
			}
		}
	},
	computed:{
		_isShow:{
			get(){
				return this.isShow
			},
			set(val) {
				this.$emit('update:isShow',val)
			}
		}
	},
	watch:{
		isShow:{
			handler(){
				this.qrFun()
			},
			deep: true
		}
	},
	data() {
		return {
			isClose: true,
			codeImg: ''
		};
	},
	methods: {
		qrFun(){
			this.$nextTick(()=>{
				// const text = location.href+'&pattern='+this.pattern
				console.log(location.href, location.origin, location.hash)
				let path = location.origin + location.pathname +`#/CardDetail?id=${this.detail.cardId}`
				let pattern = ''
				if(this.detail.styleId != 'STYLE_IMAGE'){
					pattern = '&pattern='+( Number(this.pattern)+1)
				}
				if(this.pramas.styleId){
					const {styleId, style, organisationId} = this.pramas
					if(style == 1){
						path = path + `&styleId=${styleId}&style=${style}&organisationId=${organisationId}${pattern}`
					}else{
						path = path + `&styleId=${styleId}&style=${style}${pattern}`
					}
				}else{
					if(this.detail.style == 1){
						path = path + `&styleId=${this.detail.styleId}&style=${this.detail.style}&organisationId=${this.detail.organisationId}${pattern}`
					}else{
						path = path + `&styleId=${this.detail.styleId}&style=${this.detail.style}${pattern}`
					}
				}
				console.log(path)
				UQrcode.make({
					canvasId: 'qrcode',   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: path,  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 76,
					margin: 0,
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						// console.log('UQrcode', res)
						// Base64toUrl({
						// 	"content": res,
						// 	"suffix": ".jpg"
						// }).then(res=>{
						// 	this.codeImg = res.data.url
						// 	console.log(res.data.url)
						// 	// this.wxSave()
						// })
					}
				})
			})
		},
		// h5保存图片
		htmlSave() {
			uni.showLoading({
				title: '图片正在生成中',
				mask: true
			})
			console.log('htmlSave')
			const dom = document.querySelector('#card-box')
			html2canvas(dom, {
				width: dom.clientWidth,
				height: dom.scrollHeight,
				scrollY: 0,
				scrollX: 0,
				useCORS: true,
				// allowTaint: true
			}).then((canvas) => {
				const base64 = canvas.toDataURL('image/jpg')
				this.postBase64(base64)
			})
		},
		//将Base64传入后台转换成url
		postBase64(base64) {
			const _this = this
			Base64toUrl({
				content: JSON.stringify(base64),
				suffix: ".jpg"
			}).then(urlRes => {
				uni.hideLoading()
				console.log(urlRes)
				var link = document.createElement('a');
				//把a标签的href属性赋值到生成好了的url
				// link.href = dres.tempFilePath;
				link.href = urlRes.data.url;
				//通过a标签的download属性修改下载图片的名字
				link.title = _this.detail.realName + (new Date().getTime()) + '.jpg';
				link.download = (new Date().getTime()) + '.jpg';
				// link.download = _this.innerData.realName + (new Date().getTime()) + '.jpg';
				//让a标签的click函数，直接下载图片
				link.click();
			})
		},
		downCode(){
			this.isClose = false
			this.htmlSave()
		},
		close(){
			this._isShow = false
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-wrap{height: calc(100vh);}
.bottom-action{ margin: 24rpx 0 0;width: 404rpx;}
.down-icon{ width: 70rpx;height: 70rpx;background: rgba(255,255,255,0.15);border-radius: 50%;color: #fff;}
.mr40{margin-right: 0rpx;}
.down-text{margin-top: 12rpx;color: #fff;}
.card-box{ margin: 0 auto; width: 604rpx;background: #FFFFFF;border-radius: 12rpx}
.card-box .card-hd{padding: 20rpx 32rpx 0;}
.card-box .card-hd .logo{ margin-right: 12rpx; width: 48rpx;height: 48rpx;overflow: hidden;border-radius: 50%;}
.card-box .card-bd{margin: 24rpx 0 0;}
.card-box .card-bd .head-tradition{
	position: relative;
	width: 540rpx;
	height: 376rpx;
	border-radius: 12rpx;background: no-repeat top center/cover;}
.card-box .card-bd .head-tradition .avatar{width: 320rpx;}
.card-box .card-bd{height: 408rpx;}
.card-box .card-ft{padding: 0 0 20rpx;}
.card-box .code{margin: 10rpx 6rpx 0 0; width: 160rpx;height: 160rpx;}
.card-box .txt{width: 16rpx;text-align: center; line-height: 20rpx;color: var(--contentFontFourColor);}
.card-box .txt .k{transform: rotate(90deg);}
// margin: -180rpx 0 0 -335rpx;
.head-tradition .inner{position: absolute;left: 50%;top: 50%;margin: -210rpx 0 0 -335rpx; }
.head-tradition .inner /deep/ .tradition-card{transform: scale(.75);}
.head-tradition .lang{ position: absolute; bottom: 0;left: 0;z-index: 6;width: 540rpx;}

</style>
